<h1 class="th1"><%= t("devise_related_custom_views.login") %></h1>
<div class="columns-12">
  <div class="col-6 col-offset-3">
    <div class="logmod__wrapper">
      <div class="logmod__container">
        <div class="logmod__tab-wrapper">
          <ul class="logmod__tabs">
            <li data-tabtar="lgm-1"><a href="#"><%= t("devise_related_custom_views.login") %></a></li>
            <li data-tabtar="lgm-2"><a href="#"><%= t("devise_related_custom_views.registration") %></a></li>
          </ul>
          <div class="logmod__tab lgm-1">
            <div class="logmod__heading">
              <span class="logmod__heading-subtitle"><%= raw t("devise_related_custom_views.registration_notice") %></span>
            </div>
            <div class="logmod__form">
              <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'simform' }) do |f| %>

                  <div class="sminputs">
                    <div class="input full">
                      <%= f.label :email, :class => 'string optional' %>
                      <%= f.email_field :email, :class => 'string optional', :id => 'user-email', :placeholder => 'Email'  %>
                    </div>
                  </div>

                  <div class="sminputs">
                    <div class="input full">
                      <%= f.label :password, :class => 'string optional' %>
                      <%= f.password_field :password, autocomplete: "off", :class => 'string optional', :id => 'user-pw', :placeholder => 'Password' %>
                      <span class="hide-password"><%= t("devise_related_custom_views.show") %></span>
                    </div>
                  </div>

                  <div class="simform__actions">
                    <div style="float: right; margin: 9px 70px;">
                      <%= f.submit t("devise_related_custom_views.login"), class: "btn btn-large btn-primary submit" %>
                      <% if devise_mapping.rememberable? -%>
                          <div>
                            <%= f.check_box :remember_me, :style => "float: right;" %><%= f.label :remember_me, :style => "float: left;" %>
                          </div>
                      <% end -%>
                    </div>
                    <span class="simform__actions-sidetext"><%= render "devise/shared/links" %></span>
                  </div>
              <% end %>
            </div>
            <div class="logmod__alter">
              <div class="logmod__alter-container">
                <%- if devise_mapping.omniauthable? %>
                    <%- resource_class.omniauth_providers.each do |provider| %>
                        <a href="<%= omniauth_authorize_path(resource_name, provider) %>" class="connect facebook data-pop-over">
                          <div class="connect__icon">
                            <i class="fa fa-facebook"></i>
                          </div>
                          <div class="connect__context">
                            <span><%= raw t("devise_related_custom_views.facebook.login") %></span>
                          </div>
                        </a>
                    <% end -%>
                <% end -%>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(".data-pop-over").tooltip({
    container: 'body',
    trigger: 'hover',
    placement: 'right',
    title: '<%= t("devise_related_custom_views.facebook.tooltip") %> <%= t("devise_related_custom_views.forgot_password") %>'
  })

  var LoginModalController = {
    tabsElementName: ".logmod__tabs li",
    tabElementName: ".logmod__tab",
    inputElementsName: ".logmod__form .input",
    hidePasswordName: ".hide-password",

    inputElements: null,
    tabsElement: null,
    tabElement: null,
    hidePassword: null,

    activeTab: null,
    tabSelection: 0, // 0 - first, 1 - second

    findElements: function () {
      var base = this;

      base.tabsElement = $(base.tabsElementName);
      base.tabElement = $(base.tabElementName);
      base.inputElements = $(base.inputElementsName);
      base.hidePassword = $(base.hidePasswordName);

      return base;
    },

    setState: function (state) {
      var base = this,
          elem = null;

      if (!state) {
        state = 0;
      }

      if (base.tabsElement) {
        elem = $(base.tabsElement[state]);
        elem.addClass("current");
        $("." + elem.attr("data-tabtar")).addClass("show");
      }

      return base;
    },

    getActiveTab: function () {
      var base = this;

      base.tabsElement.each(function (i, el) {
        if ($(el).hasClass("current")) {
          base.activeTab = $(el);
        }
      });

      return base;
    },

    addClickEvents: function () {
      var base = this;

      base.hidePassword.on("click", function (e) {
        var $this = $(this),
            $pwInput = $this.prev("input");

        if ($pwInput.attr("type") == "password") {
          $pwInput.attr("type", "text");
          $this.text('<%= t("devise_related_custom_views.hide") %>');
        } else {
          $pwInput.attr("type", "password");
          $this.text('<%= t("devise_related_custom_views.show") %>');
        }
      });

      base.tabsElement.on("click", function (e) {
        location.href="/register"
      });

      base.inputElements.find("label").on("click", function (e) {
        var $this = $(this),
            $input = $this.next("input");

        $input.focus();
      });

      return base;
    },

    initialize: function () {
      var base = this;

      base.findElements().setState().getActiveTab().addClickEvents();
    }
  };

  $(document).ready(function() {
    LoginModalController.initialize();
  });

</script>